<template>
  <div>
    <el-container style="padding: 0;height: 100vh">
      <el-header class="index-header" height="7vh">
        <div class="header-content page-container">
          <div class="header-left subtitle-class">{{subtitle}}</div>
          <div class="header-center project-title-class">{{projectTitle}}</div>
          <div class="header-right">
            <div class="datetime-class">{{datetime}}</div>
          </div>
        </div>
      </el-header>
      <el-main style="display: flex;justify-content: center; padding: 0; max-height: 93vh">
        <div class="page-container">
          <el-row :gutter="20" class="input-box" style="margin: 0">
            <el-col v-for="i in 10" :key="i" :span="5" style="height: 29vh; padding: 0.8vh;">
              <div class="shadow-on-hover">
                <div style="padding: 0.8vh;">
                  <div class="item-title-class">{{i}}#绕线机</div>
                  <div class="item-btn-container item-margin-top">
                    <button class="base-btn success-btn item-btn">自动</button>
                    <button class="base-btn info-btn item-btn">运行</button>
                    <button class="base-btn danger-btn item-btn">启动</button>
                    <button class="base-btn warning-btn item-btn">暂停</button>
                  </div>
                  <div class="item-item-span-class item-margin-top">
                    <span class="item-item-span-left-class">左轴：</span>
                    <span class="item-item-span-right-class">0908134425</span>
                  </div>
                  <div class="item-item-span-class">
                    <span class="item-item-span-left-class">右轴：</span>
                    <span class="item-item-span-right-class">0908135525</span>
                  </div>
                  <div class="item-item-span-class">
                    <span class="item-item-span-left-class">产量：</span>
                    <span class="item-item-span-right-class">300035</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="15" style="height: 35vh; padding: 0.8vh;">
              <el-row style="height: 28vh;width: 100%">
                <el-col v-for="i in 3" :key="'sb_' + i" :span="8" :style="{paddingRight: i != 3 ? '0.8vh' : '', paddingLeft: i != 1 ? '0.8vh' : ''}">
                  <div class="shadow-on-hover" style="height: 28vh;">
                    <div style="padding: 0.8vh;">
                      <div class="item-title-class">1#绕线机</div>
                      <div class="item-btn-container item-margin-top">
                        <button class="base-btn success-btn item-btn">自动</button>
                        <button class="base-btn info-btn item-btn">运行</button>
                        <button class="base-btn danger-btn item-btn">启动</button>
                        <button class="base-btn warning-btn item-btn">暂停</button>
                      </div>
                      <div class="item-item-span-class item-margin-top">
                        <span class="item-item-span-left-class">左轴：</span>
                        <span class="item-item-span-right-class">0908134425</span>
                      </div>
                      <div class="item-item-span-class">
                        <span class="item-item-span-left-class">右轴：</span>
                        <span class="item-item-span-right-class">0908135525</span>
                      </div>
                      <div class="item-item-span-class">
                        <span class="item-item-span-left-class">产量：</span>
                        <span class="item-item-span-right-class">300035</span>
                      </div>
                      <div class="item-item-span-class">
                        <span class="item-item-span-left-class">产量：</span>
                        <span class="item-item-span-right-class">300035</span>
                      </div>
                      <div class="item-item-span-class">
                        <span class="item-item-span-left-class">产量：</span>
                        <span class="item-item-span-right-class">300035</span>
                      </div>
                      <div class="item-item-span-class">
                        <span class="item-item-span-left-class">产量：</span>
                        <span class="item-item-span-right-class">300035</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div style="height: 5.2vh; display: flex; align-items: center; justify-content: space-between; width: 100%;">
                <div style="display: flex;justify-content: center;align-items: center">
                  <button class="common-btn">报表</button>
                  <button class="common-btn">二维码：20250911234538</button>
                  <button class="common-btn">追溯</button>
                </div>
                <div style="display: flex;justify-content: center;align-items: center">
                  <button class="common-btn">总产量：84320</button>
                  <button class="common-btn">清零</button>
                </div>
              </div>
            </el-col>
            <el-col :span="5" style="height: 34.2vh; padding: 0.8vh;">
              <div class="shadow-on-hover">
                <div class="chat-container">
                  <div class="chat-container-top">
                    <PieChart height="15vh" :title="charts.produce.title" :dataList="charts.produce.data" :percentageData="charts.produce.percentageData"></PieChart>
                  </div>
                  <div class="chat-container-bottom">
                    <PieChart height="15vh" :title="charts.quality.title" :dataList="charts.quality.data" :percentageData="charts.quality.percentageData"></PieChart>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="5" style="height: 34.2vh; padding: 0.8vh;">
              <div class="shadow-on-hover" style="padding: 1vh;box-sizing: border-box;">
                <div v-for="i in 5" :key="'ti_' + i" class="trace-list-box" :style="{marginTop: i > 0 ? '1vh' : ''}">
                  <div style="text-align: left">
                    <div class="trace-list-box-left-a">二维码:0911132436</div>
                    <div class="trace-list-box-left-b">绕线机:1#左轴</div>
                  </div>
                  <div style="display: flex;align-items: center;">
                    <button class="base-btn-mini trace-btn">追溯查询</button>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import PieChart from "./assembly/PieChart";

export default {
  name: 'Index',
  components: {
    PieChart
  },
  data () {
    return {
      projectTitle: window.g.projectTitle,
      subtitle: window.g.subtitle,
      datetime: "12:12:12",
      datetimeTask: null,
      charts: {
        produce: {
          title: "生\n产\n效\n率",
          percentageData: true,
          data: [{name:"正品",value:"33"},{name:"次品",value:"33"},{name:"总数",value:"33"}]
        },
        quality: {
          title: "质\n量\n百\n分\n比",
          percentageData: true,
          data: [{name:"正品",value:"33"},{name:"次品",value:"33"},{name:"总数",value:"33"}]
        }
      }
    }
  },
  mounted() {
    this.setDatetimeTest();
    this.setDatetime();
    this.addWinChangeEvent();
  },
  methods: {
    setDatetimeTest() {
      this.datetimeTask = setInterval(this.setDatetime, 1000);
    },
    setDatetime() {
      this.datetime = dayjs().format('HH:mm:ss');
    },
    addWinChangeEvent() {
      window.addEventListener("resize", this.sendChildrenComponent)
    },
    sendChildrenComponent() {
      const allChildren = this.findAllChildren(this);
      if (allChildren && allChildren.length > 0) {
        allChildren.forEach(function (child) {
          if (child && child.changeWidth) {
            child.changeWidth();
          }
        })
      }
    },
    findAllChildren(component, children = []) {
      if (!component.$children) return children;
      component.$children.forEach(child => {
        children.push(child);
        this.findAllChildren(child, children);
      });
      return children;
    },
  },
  beforeDestroy() {
    if (this.datetimeTask) {
      clearInterval(this.datetimeTask)
    }
    window.removeEventListener("resize", this.sendChildrenComponent)
  }
}
</script>

<style scoped>
  @media (aspect-ratio < 1.77) {
    .page-container {
      width: 99%;
    }
  }
  @media (aspect-ratio >= 1.77) {
    .page-container {
      width: 99%;
    }
  }
  .index-header {
    background: rgb(10 10 10 / 1);
    border-bottom: 1px solid rgb(0 240 255 / 0.3);
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
  }
  .header-content{
    display: flex;           /* 启用Flexbox布局 */
    justify-content: space-between; /* 两端对齐，中间的元素会平分剩余空间 */
    align-items: center;    /* 垂直居中对齐 */
  }
  .header-item {
    /* 基础样式，根据需要调整 */
    padding: 1vh;          /* 添加一些内边距以便更清楚地看到效果 */
  }
  .header-left {
    margin-right: auto;
    width: 25%;
  }
  .header-center {
    text-align: center;
  }
  .header-right {
    margin-left: auto;
    width: 25%;
    text-align: right;
  }
  .subtitle-class {
    color: rgb(0 240 255 / 1);
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.7);
    font-weight: 700;
    font-size: 1.2vw;
  }
  .project-title-class {
    color: rgb(255 255 255 / 1);
    font-weight: 700;
    font-family: Roboto Mono, monospace;
    text-align: center;
    font-size: 1.3vw;
  }
  .datetime-class {
    border: 1px solid rgb(0 240 255 / 0.5);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    border-radius: 0.8vh;
    color: rgb(0 240 255 / 1);
    height: 4vh;
    background-color: rgb(30 30 46 / 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    font-family: Roboto Mono, monospace;
    width: 20%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    float: right;
  }
  .input-box {
    .el-col-7 {
      max-width: 14.28571429%;
      flex: 0 0 14.28571429%;
    }
    .el-col-5{
      width: 20%;
    }
    .el-col-10{
      width: 40%;
    }
    .el-col-15{
      width: 60%;
    }
  }
  .shadow-on-hover {
    width: 100%;
    height: 100%;
    /*max-height: 31vh;*/
    margin: 0;
    padding: 0;
    border: 1px solid rgb(0 240 255 / 0.3);
    transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
    background: rgb(30 30 46 / 1);
    text-align: center;
    border-radius: 0.8vh;
    overflow: auto;
  }

  .shadow-on-hover:hover {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); /* 添加阴影效果 */
  }
  .item-margin-top {
    margin-top: 1vh;
  }
  .item-title-class {
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 1vw;
  }
  .item-btn-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item-btn-container > .el-button {
    width: calc(50% - 2vh);
    margin: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9vw;
    height: 3vh
  }
  .item-item-span-class {
    display: flex;
    justify-content: space-between;
    padding: 0.1vh;
    align-items: center;
  }
  .item-item-span-left-class {
    color: rgb(156 163 175 / 1);
    font-weight: 400;
    font-size: 1vw;
  }
  .item-item-span-right-class {
    font-family: Roboto Mono, monospace;
    font-size: 1vw;
  }

  .common-btn {
    font-size: 1vw;
    background-color: rgb(30 30 46 / 1);
    transition: box-shadow 0.3s ease;
    height: 4vh;
    border: 1px solid rgb(0 240 255 / 0.5);
    border-radius: 0.8vh;
    color: white;
    padding-left: 1vw;
    padding-right: 1vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .common-btn:hover {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); /* 添加阴影效果 */
  }

  .base-btn {
    font-size: 1vw;
    height: 4vh;
    border-radius: 0.8vh;
    color: white;
    cursor: pointer;
  }

  .base-btn-mini {
    font-size: 0.8vw;
    height: 3vh;
    border-radius: 0.6vh;
    color: white;
    padding-left: 0.6vw;
    padding-right: 0.6vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .success-btn {
    transition: transform 0.3s ease;
    background-color: #67C23A;
    border: 1px solid #67C23A;
  }

  .success-btn:hover {
    transform: scale(1.1);
  }
  .info-btn {
    transition: transform 0.3s ease;
    background-color: #909399;
    border: 1px solid #909399;
  }

  .info-btn:hover {
    transform: scale(1.1);
  }
  .danger-btn {
    transition: transform 0.3s ease;
    background-color: #F56C6C;
    border: 1px solid #F56C6C;
  }

  .danger-btn:hover {
    transform: scale(1.1);
  }
  .warning-btn {
    transition: transform 0.3s ease;
    background-color: #E6A23C;
    border: 1px solid #E6A23C;
  }

  .warning-btn:hover {
    transform: scale(1.1);
  }

  .trace-btn {
    transition: transform 0.3s ease;
    background-color: rgb(157 78 221 / 1);
    border: 1px solid rgb(157 78 221 / 1);
  }

  .trace-btn:hover {
    transform: scale(1.1);
  }
  .item-btn-container > .item-btn {
    width: calc(50% - 1vh);
    margin: 0.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    height: 3vh
  }
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .chat-container-top {
    flex: 1;
    border-bottom: 1px solid rgb(0 240 255 / 0.5);
  }
  .chat-container-bottom {
    flex: 1;
  }
  .trace-list-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1vh;
    border: 1px solid rgb(55 65 81 / 1);
    border-radius: 0.8vh;
    padding: 1vh;
    background-color: rgb(20 20 32 / 1);
  }
  .trace-list-box-left-a {
    color: rgb(0 240 255 / 1);
    font-family: Roboto Mono, monospace;
    font-size: 1.8vh;
    line-height: 2.5vh;
  }
  .trace-list-box-left-b {
    color: rgb(156 163 175 / 1);
    font-size: 1.6vh;
    line-height: 2.5vh;
  }
</style>
